<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07_页面固定广告</title>
  <style>
    .top{
      font-size: 30px;
      height: 120px;
      background-color: #5aa4ae;
      position: fixed;
      top:0;
      width: 100vw;
      color: #fff;
    }
    .left,.right{
      width: 60px;
      height: 200px;
      top: 300px;
      position: fixed;
    }
    .left{
      background-color: #fff799;
      left: 20px;
    }
    .right{
      background-color: #f35336;
      right: 20px;
    }
    .main{
      margin-top: 130px;
    }
  </style>
</head>
<body>
<div class="left">我是左侧广告条</div>
<div class="right">我是右侧广告条</div>
<div class="top">我是顶部广告条</div>
<div class="main">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet beatae consectetur, consequatur cum deserunt eius
    illo inventore libero magni, molestiae nam nobis nostrum quod soluta ullam velit veniam vitae voluptates!
  </div>
  <div>Autem consequuntur eligendi esse est iste, libero modi mollitia nihil nisi nobis optio quae ratione tempora totam
    ut. Architecto dignissimos esse soluta tempore! Aspernatur doloremque est expedita harum hic ullam.
  </div>
  <div>A accusantium alias animi, blanditiis commodi debitis, dolor error exercitationem fuga illo illum impedit
    inventore ipsam molestiae mollitia nobis, non odit perferendis perspiciatis quis suscipit temporibus tenetur! Amet,
    labore, possimus!
  </div>
  <div>Ab ad aut autem distinctio, magni modi molestias natus nihil nobis nostrum nulla officia perspiciatis possimus
    quam quas repellat voluptatum? Cum cupiditate ex hic iusto officiis omnis rerum tempora totam.
  </div>
  <div>Animi, blanditiis consectetur cumque error fugiat ipsa nihil qui sit soluta. Adipisci aperiam aspernatur culpa
    distinctio doloribus exercitationem explicabo inventore, minima molestias, nam necessitatibus pariatur perferendis
    possimus? Autem, ex, repellat.
  </div>
  <div>Atque ducimus esse excepturi ipsa iste nam officia ratione repellendus, repudiandae voluptatibus? Adipisci
    aliquid at dicta dignissimos, error ipsam ipsum molestiae, non odit placeat, quas reprehenderit saepe sed soluta
    vero.
  </div>
  <div>Itaque natus odit quas qui rerum tempora unde. Cupiditate deleniti doloribus, enim exercitationem expedita
    facilis fugit harum iste optio qui ratione sint ut? Dignissimos distinctio mollitia nesciunt obcaecati praesentium
    tenetur!
  </div>
  <div>Ab commodi, culpa cumque dolores eaque earum eveniet ipsa minus mollitia odit omnis temporibus tenetur ullam
    veritatis voluptatem! Atque ducimus error laborum molestias, provident quaerat recusandae similique ut velit
    voluptate.
  </div>
  <div>A amet architecto autem corporis, cupiditate dolor dolorum error esse excepturi expedita magni nihil, nobis
    numquam omnis pariatur possimus praesentium quaerat quia quo sed soluta suscipit veritatis vero vitae voluptatum?
  </div>
  <div>Ad atque consequuntur cumque earum eius excepturi fuga fugiat, in ipsam libero magnam mollitia nam non odio
    officia officiis perspiciatis porro praesentium, provident qui quisquam recusandae repellendus sint sunt tenetur!
  </div>
  <div>Error impedit necessitatibus praesentium quae quod. A cupiditate dignissimos dolor dolorem error fuga harum illum
    inventore maxime nulla possimus, praesentium quam quasi quis quo ratione sequi tempore? A, ad, eligendi.
  </div>
  <div>Alias aliquam aut delectus deleniti, dolorem doloremque earum eos eveniet fugiat id in iste laudantium molestiae
    nam nihil nobis odio perspiciatis possimus, quas sed sequi suscipit unde vitae voluptas voluptatem!
  </div>
  <div>Ab libero sapiente voluptatem? Inventore iusto possimus tenetur totam voluptas. Accusamus aliquid atque,
    doloribus hic illum ipsam molestiae necessitatibus odit quis quo reprehenderit sed sequi tenetur? Asperiores maiores
    placeat reiciendis.
  </div>
  <div>Est provident quo vero! Ab, aliquam assumenda autem cumque earum eveniet excepturi expedita facere in ipsa
    laboriosam magnam, necessitatibus perspiciatis provident quis repellat rerum vitae. Aperiam assumenda distinctio
    laudantium temporibus.
  </div>
  <div>Accusantium architecto dolores eaque iusto, laborum libero molestias mollitia nemo omnis quos. Ad est libero
    nulla ratione repellat saepe, voluptatum. Deleniti dicta facilis fuga ipsa quae quia ratione sed veniam.
  </div>
  <div>Consequuntur dolores eligendi explicabo libero magnam, omnis reiciendis? Accusamus alias aliquam cupiditate
    dolorem doloremque earum eos et facere in, incidunt pariatur praesentium provident quas quasi ratione reprehenderit,
    sapiente vero voluptatibus?
  </div>
  <div>Alias aliquid assumenda enim ex excepturi inventore ipsam ipsum, iste maxime minima modi natus nemo nisi officia
    perferendis porro possimus quod, sit veritatis voluptatum. Commodi et eveniet fuga maxime voluptatibus!
  </div>
  <div>Ab accusantium alias aliquid at blanditiis delectus distinctio doloribus ex fugiat id ipsum iste labore
    laboriosam minus nihil nisi, obcaecati perspiciatis recusandae repudiandae tenetur totam vero voluptas voluptatem,
    voluptates voluptatibus!
  </div>
  <div>Aliquid aspernatur corporis dolorum eius eum excepturi, expedita id impedit iste labore magni natus neque
    provident quae quaerat quia quisquam quo sequi temporibus velit? Dolore iusto neque obcaecati voluptas voluptate.
  </div>
  <div>Accusamus at consectetur cumque illo impedit modi nobis quod recusandae repellendus veniam. Accusamus alias,
    aperiam asperiores delectus fuga incidunt iste magni modi necessitatibus, nisi officia, quasi recusandae sit tenetur
    veniam?
  </div>
  <div>Amet delectus distinctio dolore dolorum, error harum hic, iure iusto mollitia nostrum omnis quisquam, quo
    sapiente sed sit vel voluptates? Facere iste libero neque nihil quos suscipit ullam? Expedita, pariatur!
  </div>
  <div>Fugiat laboriosam nam praesentium! Adipisci atque beatae blanditiis, dignissimos dolores doloribus error est
    eveniet explicabo, fuga ipsa laborum necessitatibus non perferendis perspiciatis quas, quasi ratione saepe sit sunt
    ullam unde.
  </div>
  <div>Ab architecto commodi enim eum exercitationem odio temporibus? Aliquid amet architecto doloribus eos esse ex
    fugit harum illum ipsam maiores molestias quam, ratione temporibus. Cupiditate fuga fugit ipsa nostrum officia!
  </div>
  <div>Amet beatae, dicta enim eos ex facilis natus omnis quis saepe! Atque culpa error molestiae nisi sunt ut vero.
    Atque earum hic impedit magni optio possimus ratione repellat. Nisi, placeat.
  </div>
  <div>Asperiores, cumque doloribus officia porro repellendus repudiandae totam veniam? Accusamus assumenda commodi
    delectus dolor, error eum excepturi exercitationem explicabo facilis nihil nobis numquam ut velit? Deleniti dicta
    ratione reprehenderit voluptas.
  </div>
  <div>Non officiis quaerat tenetur! Animi deleniti, doloribus eos esse hic id praesentium qui quo unde voluptate.
    Dicta, eveniet exercitationem fugit iure quia soluta temporibus! Consequuntur nam pariatur porro possimus soluta!
  </div>
  <div>Adipisci consequuntur laborum odio optio porro quae sed tenetur vero vitae? A asperiores dolor, eius est facere,
    illum iure, nesciunt nihil odit ratione totam veritatis. Asperiores consectetur doloribus libero quam.
  </div>
  <div>Commodi consequatur eius illo labore, molestiae mollitia necessitatibus repellendus sapiente totam. A amet
    aperiam, atque corporis error facilis fuga magni maxime minus mollitia nobis nulla quasi sed sunt voluptatem
    voluptatibus.
  </div>
  <div>Accusamus, ad aliquam aliquid assumenda commodi consequatur deleniti dolore eaque expedita fuga impedit magnam
    nam nemo nesciunt nisi numquam odio ratione rerum soluta temporibus unde, vel velit veritatis voluptate voluptates?
  </div>
  <div>Atque dolorum esse iure perferendis? Illum impedit iste magnam neque odit omnis qui temporibus voluptatibus?
    Assumenda consequuntur doloribus, harum id, illo incidunt nulla, praesentium quidem repellendus rerum suscipit
    veritatis vitae?
  </div>
  <div>Commodi deserunt dicta distinctio dolores ea eaque earum hic illum nam nemo officia quod, reiciendis voluptatem!
    Consequuntur dicta eum exercitationem ipsa, iste, laboriosam provident qui repudiandae sequi tempora ut vero!
  </div>
  <div>Asperiores, esse in nesciunt quos reprehenderit tempora vitae voluptas voluptatem. A accusantium dolorem in
    incidunt inventore ipsam laborum maiores non, numquam, odit quam reprehenderit sint vel, velit vitae. Asperiores,
    cumque!
  </div>
  <div>Consectetur dolorem est quam quasi quia ratione voluptates! Animi aut autem consequuntur doloribus exercitationem
    explicabo facilis fugit modi necessitatibus non obcaecati placeat praesentium quasi quo repudiandae sunt, tempora
    ullam vero.
  </div>
  <div>Assumenda autem consectetur est ipsum quia vel voluptatem? Beatae blanditiis consectetur dicta, dolorem
    explicabo, fuga harum minima nesciunt nobis nulla possimus quae quas repellendus sapiente suscipit vitae voluptas
    voluptates voluptatum?
  </div>
  <div>Consequatur ducimus esse eum explicabo, nihil nisi quia recusandae reiciendis voluptate voluptatum! Deserunt,
    facilis, sed. Assumenda cumque doloribus ducimus earum excepturi ullam. Beatae dolores est porro quia quos
    recusandae reiciendis?
  </div>
  <div>Aliquid animi aperiam eum ex fugit harum in, nostrum officiis quidem quo quod quos repudiandae saepe sint
    voluptatum? Distinctio fugit inventore pariatur quas quis quisquam tempore ullam vero. Fugiat, vel?
  </div>
  <div>Aliquam commodi culpa dolore eum illum in itaque maxime molestias nesciunt officia quos, repudiandae voluptatum.
    Ab ad aspernatur atque consequuntur explicabo magni molestiae provident, voluptatibus. Accusamus facere quis quo
    vero!
  </div>
  <div>Aut molestias reprehenderit ut? Accusamus ad alias asperiores assumenda consectetur consequatur deserunt ea eaque
    harum illum impedit itaque libero, natus numquam, odit repudiandae rerum sapiente sequi sunt, suscipit temporibus
    veritatis.
  </div>
  <div>Accusantium adipisci amet aut culpa cum distinctio dolorem, dolorum ducimus eos est expedita, libero magnam nemo
    nulla optio perspiciatis possimus quaerat quasi repellendus repudiandae sit totam unde vel veritatis voluptatum.
  </div>
  <div>A culpa cupiditate dicta facere natus nihil nobis sequi sunt. Alias corporis, ducimus ea earum excepturi
    exercitationem, harum id iure modi numquam praesentium provident quibusdam reiciendis similique sint sunt ullam.
  </div>
  <div>Ad aspernatur corporis deleniti dolorum et eum exercitationem, fuga fugit harum ipsa iste libero minus nesciunt
    officia officiis perferendis porro quam quia quod recusandae reprehenderit repudiandae sapiente temporibus velit
    voluptas.
  </div>
  <div>Autem dolorum eos error hic minima molestias neque odio quis soluta tempore, tenetur, unde? Accusamus alias,
    consequuntur cum dicta enim impedit, provident qui quisquam ratione repellendus similique vero voluptates
    voluptatibus.
  </div>
  <div>Ab ducimus in incidunt laudantium nesciunt similique tempore unde. Cumque debitis dolorem eaque eveniet fugit in
    iste, minus molestias nobis nulla odio odit optio quaerat quod quos similique unde vel!
  </div>
  <div>Ab alias delectus dolore earum, esse, hic impedit ipsam iusto labore laborum mollitia nisi numquam possimus quia
    quis, quo sapiente similique ut vel veniam. Adipisci beatae ipsam rem? Modi, quia?
  </div>
  <div>Ab ad aliquam blanditiis, cumque dolorum est illo minima nemo obcaecati odio, perspiciatis possimus quis ratione
    reprehenderit, voluptatibus. Blanditiis consequatur cupiditate dolore excepturi fuga harum ipsa, laboriosam libero
    tempora ullam.
  </div>
  <div>Aspernatur, assumenda autem cum dolorem doloremque doloribus eos ex fugiat itaque minus nobis optio quam saepe
    sed tempora totam unde voluptas. Ea laboriosam laborum molestias odit praesentium reprehenderit tenetur, veritatis?
  </div>
  <div>Animi dolor, doloremque harum libero natus nesciunt nihil, odio recusandae reprehenderit unde voluptatem
    voluptatum? Aliquam aliquid assumenda, distinctio dolore esse exercitationem expedita fugit id illum, obcaecati quo
    reiciendis repellat voluptatem.
  </div>
  <div>Dicta eligendi nulla quidem? Distinctio rerum sed soluta temporibus. Animi deleniti ducimus eaque, hic odio omnis
    suscipit? Aliquid aperiam at deleniti eius est facere illo illum incidunt laborum rerum, temporibus.
  </div>
  <div>Aspernatur blanditiis, consequatur dolorem, dolores eius laudantium magnam minus mollitia nisi non nostrum
    officiis placeat quae qui quo repellat sequi sunt tenetur? Accusamus debitis, deleniti eos ex fuga impedit placeat?
  </div>
  <div>Accusamus commodi doloribus esse in inventore modi vel! Ab accusamus aliquid amet aut deserunt dolores doloribus
    et facere impedit incidunt, iusto maxime minima molestiae necessitatibus nemo quae quas quidem repudiandae!
  </div>
</div>
</body>
</html>